<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
		* {
			padding: 0px;
			margin:0px;
			list-style:none;
		}
		.wrapper {
			position:relative;
			width:400px;
			height:250px;
			margin:100px auto 0px;
			/*border:1px solid black;*/ 
			overflow:hidden;
		}
		.wrapper .sliderPage {
			position:absolute;
			left:0px;
			top:0px;
			height:250px;
			width:2000px;
		}
		.wrapper .sliderPage li {
			width: 400px;
			height:250px;
			float:left;
		}
		.wrapper .sliderPage li img {
			width:100%;
			height:100%;
		}
		.wrapper .btn {
			position:absolute;
			top:50%;
			margin-top:-20px;
			width:40px;
			height:40px;
			color:#fff;
			background-color:#000;
			border-radius: 50%;
			text-align:center;
			line-height:40px;
			opacity: 0.1;/*透明度*/
			cursor:pointer;/*变成小手*/
		}
		.wrapper:hover .btn {
			opacity:0.7;
		}
		.wrapper .leftBtn {
			left:15px;
		}
		.wrapper .rightBtn {
			right:15px;	
		}
		.wrapper .sliderIndex {
			position:absolute;
			width:100%;
			bottom:15px;
			text-align:center;/*因为inline有文本特性*/
			cursor:pointer;
		}
		.wrapper .sliderIndex span {
			display:inline-block;
			width: 8px;
			height:8px;
			background-color:#ccc;
			border-radius:50%;
			margin-right: 10px;
		}
		.wrapper .sliderIndex .active {
			background-color: #f40;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<ul class="sliderPage">
			<li>
				<img src="img/1.jpg" alt="">
			</li>
			<li>
				<img src="img/2.jpg" alt="">
			</li>
			<li>
				<img src="img/3.jpg" alt="">
			</li>
			<li>
				<img src="img/4.jpg" alt="">
			</li>
			<li>
				<img src="img/1.jpg" alt="">
			</li>
		</ul> 
		<div class="btn leftBtn">&lt;</div>
		<div class="btn rightBtn">&gt;</div>
		<div class="sliderIndex">
			<span class="active"></span>
			<span ></span>
			<span ></span>
			<span ></span>
		</div>

	</div>


	<script>
		var timer = null;
		var sliderPage = document.getElementsByClassName('sliderPage')[0];
		var moveWidth = sliderPage.children[0].offsetWidth;
		var num = sliderPage.children.length - 1;
		// 当有4张图片，则要移动3次。
		var leftBtn = document.getElementsByClassName('leftBtn')[0];
		var rightBtn = document.getElementsByClassName('rightBtn')[0];
		var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
		var lock = true;
		// 这个锁是用来锁住每张图片必须完全走完才能让下张图片进行，防止卡图。
		var index = 0;
		// 用来改变下面的圆点颜色
		leftBtn.onclick = function () {
			autoMove('right->left');
		}
		rightBtn.onclick = function () {
			autoMove('left->right');
		}

		for (var i = 0; i < oSpanArray.length; i++) {
			(function (myIndex) {
				oSpanArray[i].onclick = function () {
					lock = false;
					clearTimeout(timer);
					index = myIndex;
					startMove(sliderPage, {left: - index * moveWidth}, function () {
						lock = true;
						timer = setTimeout(autoMove, 1500);
						changeIndex(index);
					});
				}
			}(i))
		}
		// direction
		// 默认轮播方向/right按钮 'left->right' / undefined
		// 每次让ul.left减去li自身宽度
		// 点击left按钮 'right->left' 
		// 每次让ul.left加li自身宽度
		function autoMove(direction) {
			if (lock) {
				lock = false;
				clearTimeout(timer);//防止点完左键，还没走完就开始往右走了
				// 在这里清定时器，会停止轮播
				if(!direction || direction == 'left->right') {
					index++;
					startMove(sliderPage, {left:sliderPage.offsetLeft - moveWidth}, function () {
						if (sliderPage.offsetLeft == -num * moveWidth) {
							index = 0;
							sliderPage.style.left = '0px';
							// 就这个是自己想到的
						}
						timer = setTimeout(autoMove, 1500);
						// 在这里重新开启定时器
						lock = true;
						changeIndex(index);
					});
				}else if(direction =='right->left') {
					if (sliderPage.offsetLeft == 0) {
						sliderPage.style.left = - num * moveWidth + 'px';
						index = num;
					}
					index--;
					startMove(sliderPage, {left:sliderPage.offsetLeft + moveWidth},function () {
						timer = setTimeout(autoMove, 1500);
						// 在这里重新开启定时器
						lock = true;
						changeIndex(index);
					})
				}
			}
			
		}

		function changeIndex(_index) {
			for (var i = 0; i < oSpanArray.length; i++) {
				oSpanArray[i].className = '';
			}
			oSpanArray[_index].className = 'active';
		}


		timer = setTimeout(autoMove, 1500)
		// 1500毫秒调用一个autoMove函数		
		function getStyle (obj, attr) {
			if (obj.currentStyle) {
				return obj.currentStyle[attr];
			}else {
				return window.getComputedStyle(obj, false)[attr];
			}
		}

		function startMove(obj, json, callback) {
			clearInterval(obj.timer);
			var iSpeed, iCur;
			obj.timer = setInterval (function () {
				var bStop = true;
				for (var attr in json){
					if (attr == 'opacity') {
						iCur = parseFloat(getStyle(obj, attr)) * 100;
					}else {
						iCur = parseInt(getStyle(obj, attr));
					}
					iSpeed = (json[attr] - iCur) / 8;
					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
					if (attr == 'opacity') {
						obj.style.opacity = (iCur + iSpeed) / 100;
					}else {
						 obj.style[attr] = iCur + iSpeed + 'px'; 
					}
					if (iCur != json[attr]) {
						bStop = false;
					}
				}
				if (bStop) {
					clearInterval(obj.timer);
					typeof callback == 'function' ? callback() : '';
				}
			},30)
		}			
	</script>
</body>
</html>